<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        const person = { name: 'lin', age: 22, sex: '男' };
        /* 
            let name = person.name 
            let age = person.age
            let sex =person.sex
            如果左边的数量大于右边的数量 多余的会被赋值成undefined
        */
        let { age } = person; // 对象的结构赋值

        console.log(age); // 打印结果：22

        //给左边的变量自定义名称
        let { name: dataName, age: dataAge, sex: dataSex } = person
        console.log(dataName);

       
        // 如果变量 foo 在解构之前就已经定义了，此时你再去解构，就会出现问题。
        let foo = 'hello';
        // 需要加个()
        ({ foo } = { foo: 'hello2' });
        console.log(foo); //输出结果：hello2
    

        // 多层嵌套对象的解构
            const user = {
                name:{
                    firstname:'lee',
                    lastname :'sb'
                }
            }

            // let {name} = user
            // let {firstname} = name
            // console.log(firstname);
            // 不需要分成两部 比别名多了个括号
            let {name :{firstname}} = user
            console.log(firstname);
    </script>
</body>

</html>